AngularJs 学习笔记（二）
一、AngularJs内置指令
HTML在构建应用（App）时存在诸多不足之处，AngularJS通过扩展一系列的HTML属性或标签来弥补这些缺陷，所谓指令就是AngularJS自定义的HTML属性或标签，这些指令都是以ng-做为前缀的，例如ng-app、ng-controller、ng-repeat等。
- ng-app 指定应用根元素，至少有一个
- ng-controller 指定控制器
- ng-show 控制器元素是否显示， true显示、false不显示
- ng-hide控制元素是否隐藏，true隐藏、false不隐藏
- ng-if控制元素是否“存在”，true存在、false不存在
- ng-src增强图片路径
- ng-href增强地址
- ng-class控制类名
- ng-include引入模板
- ng-disabled表单禁用
- ng-readonly表单只读
- ng-checked单/复选框表单选中
- ng-selected下拉框表单选中
<script>
内置指令：angular开始为html内置好的一些特定功能的属性标签。
当解析到ng代码时，会回到html当中解析自己的指令。
var app = angular.module('app',[]);
app.controller('xmgControler',['$scope',function ($scope) {
在模型上绑定数据
$scope.isShow = 1;
$scope.path = "image/03.jpg";
$scope.name = "xmg";
$scope.active = false;
$scope.sty = {
'font-size': '30px'
};
}]);
</script>
<body ng-app="app" ng-controller="xmgControler">
它的做法，其实就是相当设置样式display:none
<p ng-show="isShow">ng-show 控制标签是否显示</p>
ng-hide控制标签是否隐藏 取值为bool （true/false 1/0）
<p ng-hide="false">ng-hide控制标签是否隐藏 取值为
bool （true/false 1/0）</p>
ng-if控制标签是否存在 取值为bool （true/false 1/0）
<p ng-if="false">ng-if控制标签是否存在 取值为
bool （true/false 1/0）</p>
使用ng-src加载图片
<img ng-src="{{path}}" alt="">
使用ng-herf跳转
<a ng-href="#"></a>
ng-class指令，控制是否添加某个类 为true为添加，为false不添加
<p ng-class="{red:active,font:true}">ng-class指令，控制是否添加某个类</p>
给当前标签手动添加样式
<p ng-style="sty">ng-style 控制样式</p>
</body>
二、自定义指令
AngularJs允许根据实际业务需要自定义指令，通过angular全局对象下的directive方法实现。
restrict：‘ECMA’ 指令的类型
- E：element元素
- A：attribute属性
- C：class类
- M：mark replace必须为true
template：（列表模板）
templateUrl：‘./head.html’
replace：true （是否替换原有标签）
transclude：true （是否保留指令包裹的内容）
app.directive('nav',[function () {
return{
E:元素 A:属性 C:当作类 M:可以注释形式出
restrict:'EA',
//template:'<ul><li>列表</li></ul>',
templateUrl:'./nav.html',
replace:true 是否替换原标签
}
}]);
app.directive('nav',[function () {
return{
E:元素 A:属性 C:当作类 M:可以注释形式出
restrict:'EA',
//template:'<h1>列表</h1 ><div ng-transclude></div>',
templateUrl:'./nav.html',
replace:true, 是否替换原标签
transclude:true 是否保留指令包裹的内容，同时跟ng-transclude配合使用
}
}]);
注意点：
- 组件：用模板替换指令。
- 如果指令名称为大写，在使用时，会使用-小写。例，mrWoo 使用时要用 mr-woo
三、数据绑定
- AngularJS是以数据做为驱动的MVC框架，所有模型（Model）里的数据经由控制器（Controller）展示到视图（View）中。
- 所谓数据绑定指的就是将模型（Model）中的数据与相应的视图（View）进行关联
1.单向绑定
指的是把模型的数据展示到视图当中
绑定的方式有三种：
- 使用插值语法：｛｛模型属性｝｝ 加载时，会造成闪烁。可以使用ng-cloak来避免闪烁
- 使用ng-bind：ng-bind=“模型属性” 不会造成闪烁，只能绑定一个属性
- 使用ng-bind-template=“｛｛模型属性｝｝” 可以绑定多值，不会出现闪烁
<script>
var app = angular.module('app',[]);
app.controller('wooController',['$scope',function ($scope) {
数据单向绑定
$scope.name = "xmg";
$scope.age = 20;
}]);
</script>
<body ng-app="app">
<ul ng-controller="wooController">
使用｛｛｝｝可以把模型的数据绑定到视图当中
加载时，会造成闪烁
<li>{{name}}{{age}}</li>
<li ng-cloak>{{name}}{{age}}</li>
ng-bind绑定 不会造成闪烁 没有办法绑定多个属性
<li ng-bind="name"></li>
可以绑定多个数据。不会造成闪烁
<li ng-bind-template="{{name}}{{age}}"></li>
</ul>
2.双向绑定
- 数据双向绑定：视图的数据可以绑定到模型中，模型的数据可以绑定到视图中
- 想要实现视图的数据绑定到模型中必须得要借助表单才行
- 在表单中使用ng-model指令，在input标签当中绑定属性
<body ng-app="app" ng-controller="wooController">
模型的数据绑定到视图当中，使用ng-bind指令
<h1 ng-bind="name"></h1>
数据的双向绑定必须得借助表单才行
视图的数据绑定到模型中，使用ng-model
<input type="text" ng-model="userName">
<input type="password" ng-model="pwd">
监听按钮点击，使用方法ng-click=“事件名称（）”
<button ng-click="login()">登录</button>
<script>
var app = angular.module('app',[]);
app.controller('wooController',['$scope',function ($scope) {
在模型中定义name属性
$scope.name = "登录"
事件的实现
$scope.login = function () {
点击时可以直接打印视图绑定到模型中的数据
alert($scope.userName+$scope.pwd);
};
}]);
</script>
